<template>
  <div class="search-title">
    <span class="linetext"></span>
    <span class="linetitle">
      您正在搜索"<span style="color: #00bdfe;">{{ keyword }}</span>"相关: 总共搜索到{{ count }}个相关API
    </span>
    <span class="linetext"></span>
  </div>
</template>

<script setup>
import { computed } from 'vue';
import { useRoute } from 'vue-router';

const props = defineProps({
  count: {
    type: Number,
    required: true
  }
});

const route = useRoute();
const keyword = computed(() => route.query.keyword || '');
</script>

<style scoped>
.search-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 75px;
  height: 50px;
}

.linetext {
  height: 2px;
  background-color: #e7e7e4;
  flex-grow: 1;
}

.linetitle {
  color: #333;
  font-size: 23px;
  padding: 0 10px;
}
</style>
